<template>
  <el-container>
    <el-header >
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <!-- <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
          <svg-icon class="primary" :icon-class="$route.meta.icon"/>
          <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
        </div> -->
        <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">
            <div class="report_header_date">
              <Distpicker :province="district.province" :city="district.city" :area="district.area" @selected="onSelected" />
            </div>
            <div class="report_header_query">
              <el-input v-model="query.name" prefix-icon="el-icon-search" placeholder="店铺名称"  />
            </div>
          </div>
          <div>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryshop">查询</el-button>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['shop.add']">新增</el-button>
          </div>
        </div>
      </div>
    </el-header>
    <div class="pd10">
<!--      <div v-show="queryType == false" style="margin-bottom: 10px;display: flex;align-items: center">-->
<!--        <Distpicker :province="district.province" :city="district.city" :area="district.area" @selected="onSelected" />-->
<!--&lt;!&ndash;        <el-select v-model="query.type" placeholder="请选择类型" style="margin-left: 10px">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-select>&ndash;&gt;-->
<!--        <el-input v-model="query.name" prefix-icon="el-icon-search" placeholder="店铺名称" style="margin-left: 10px; width: 200px" />-->
<!--        <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" @click="queryshop">查询-->
<!--        </el-button>-->
<!--        <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" @click="resetshop">重置-->
<!--        </el-button>-->
<!--      </div>-->
      <el-table v-loadMore="[payLoads,'shopList']" :data="tableData" :height="curHeight" style="width: 100%;" row-key="id" border stripe>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="name" align="left" label="店铺名称" />
        <el-table-column prop="type" align="left" label="店铺类型" width="100">
          <template slot-scope="{ row }">
            <el-tag :type="row.type | statusTagFiltertype">{{ row.type | watchStatusagen }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="所在地" align="left" />
        <el-table-column prop="address" label="详细地址" align="left" />
        <el-table-column prop="telephone" label="联系电话" align="center" width="110"/>
        <el-table-column prop="status" label="状态" align="center" width="80">
          <template slot-scope="{ row }">
            <el-tag :type="row.status | statusTagFilter">{{ row.status | watchStatus }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="type" label="类型" align="center" width="80">
          <template slot-scope="{ row }">
            <el-tag type="success">{{ row.type | watchType }}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column fixed="right" align="center" label="操作" width="80">
          <template slot-scope="scope">
            <div style="display: flex;flex-direction: row;justify-content: center">
              <el-tooltip v-permission="['shop.edit']" class="item" effect="dark" content="编辑" placement="top-start">
                <a @click="editClick(scope.row)"><i style="color: #409EFF" class="el-icon-edit" /></a>
              </el-tooltip>
              <el-tooltip v-permission="['shop.del']" class="item" effect="dark" content="删除" placement="top-start">
                <a style="margin-left: 10px" @click="delshop(scope.row)"><i style="color: #F56C6C" class="el-icon-delete" /></a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-footer class="el-footerBox">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-footer>
  </el-container>
</template>

<style scoped>
.table-container {
  padding: 10px;
  box-sizing: border-box;
}
.el-mainBox {
  padding: 0 !important;
}
</style>

<script>
import permission from '@/directive/permission/index.js' // 权限判断指令
import { EventBus } from '@/api/eventBus'
import utils from '../../utils/utils.js'
import { list, del, officeIdFind } from '@/api/shop'
import Pagination from '@/components/Pagination'
import Distpicker from '@/components/Distpicker/Distpicker'
import loadMore from '@/utils/loadMore.js'
export default {
  name: 'shopList',
  directives: { permission, loadMore },
  components: { Pagination, Distpicker },
  filters: {
    watchStatus(val) {
      val = val.toString()
      if (val == 0) {
        return '待审核'
      } else if (val == 1) {
        return '已审核'
      } else if (val == 2) {
        return '已关闭'
      }
    },
        watchStatusagen(val) {
      val = val.toString()
      if (val == 0) {
        return '直营店'
      } else if (val == 3) {
        return '加盟店'
      }else if (val == 4) {
        return '联盟店'
      }
    },
    watchType(val) {
      val = val.toString()
      if (val == 0) {
        return '店铺'
      } else if (val == 1) {
        return '提货点'
      } else if (val == 2) {
        return '仓库'
      }
    },
    statusTagFilter(val) {
      if (val == 1) {
        return 'success'
      } else {
        return ''
      }
    },
    statusTagFiltertype(val) {
      if (val == 3) {
        return 'success'
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      curHeight:null,
      queryType: true,
      request: 'shop',
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      addressOptions: [
        { value: '', label: '全部' }],
      typeValue: '',
      typeOptions: [
        { value: '', label: '全部' },
        { value: 0, label: '店铺' },
        { value: 1, label: '提货点' },
        { value: 2, label: '仓库' }],
      query: {
        areaId: '',
        address: '',
        type: '',
        name: '',
        areaName: ''
      },
      district: {},
      payLoads: ''
    }
  },
  activated() {
    this.payLoads = new Date().getTime()
  },
  created() {
    EventBus.$on('shop-add', res => { // 监听新增完毕
      // 更新列表数组
      this.tableData.splice(0, 0, res)
    });
    EventBus.$on('shop-edit', res => { // 监听状态更新
      // 更新列表数组
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == res.id) {
          this.$set(this.tableData, i, res)
        }
      }
    })
    this.getList()
    this.comeIn()
    this.beforeMount()
  },
  methods: {
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            _this.curHeight = h - 266//减去页面上固定高度height
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            _this.curHeight = h - 220//减去页面上固定高度height
          }
        })();
      };
    },
    comeIn(){
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220//减去页面上固定高度height
    },
    chooseClick() {
      this.queryType = !this.queryType
    },
    queryshop() {
      this.getList()
    },
    onSelected(val) {
      if (!utils.isNull(val.city) && !utils.isNull(val.area) && !utils.isNull(val.area.code)) {
        this.query.areaId = val.area.code
        // this.form.address = val.city.value + val.area.value
      }
    },
    resetshop() {
      for (const key in this.query) {
        this.query[key] = ''
      }
      this.pageNum = 1
      this.pageSize = 20
      this.getList()
    },
    addClick(row) {
      if (utils.isNull(row)) {
        this.$router.push({
          path: '/shop/add'
        })
      }
      else {
        this.$router.push({
          path: '/shop/add',
          query: { rowData: row }
        })
      }
    },
    getList() {
      const params = new URLSearchParams()
      params.append('name', this.query.name)
      params.append('address', this.query.address)
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.pageSize)
      params.append('areaId', this.query.areaId)
      params.append('areaName', this.query.areaName)
      // params.append('type', 0)/

      list(params)
        .then(resolve => {
          console.log(resolve)
          this.tableData = resolve.data.data
          this.total = resolve.data.total
          this.pageNum = resolve.data.pageable.pageNum
          this.pageSize = resolve.data.pageable.pageSize
        })
        .catch(error => {
          console.log(params)
          console.log(error)
        })
    },
    editClick(row) {
      const _this = this
      this.currentParentId = row.parentId// 记起当前父节点
      this.currentId = row.id// 记起当前id

      this.$store.dispatch('tagsView/delCachedView', { name: 'shop-edit' }).then(({ cachedViews }) => {
        _this.$router.push({
          path: '/shop/edit',
          query: { id: row.id } // 因为修改要查找上级，所以把列表传过去
        })
      })
    },
    delshop(row) {
      const _this = this
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(row.id).then(response => {
          console.log(response)
          // 更新列表数组
          if (!utils.isNull(row.parentId)) {
            const obj = utils.findTree(row.parentId, _this.tableData)
            obj.childrens.forEach(function(item, index) {
              if (item.id == row.id) {
                // 因为obj是_this.tableData取出来的，所以是同一指针，改变obj也会改变_this.tableData
                obj.childrens.splice(index, 1)
              }
            })
            const leftObj = utils.findTree(row.parentId, _this.department)
            leftObj.childrens.forEach(function(item, index) {
              if (item.id == row.id) {
                // 因为obj是_this.tableData取出来的，所以是同一指针，改变obj也会改变_this.tableData
                leftObj.childrens.splice(index, 1)
              }
            })
          } else {
            // 没父节点就肯定是根结点
            _this.tableData.forEach(function(item, index) {
              if (item.id == row.id) {
                _this.tableData.splice(index, 1)
              }
            })
            _this.department.forEach(function(item, index) {
              if (item.id == row.id) {
                _this.department.splice(index, 1)
              }
            })
          }
        }).catch(error => {

        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  .report_header_date {
    margin-left: 10px;
    width: 380px;
    margin-top: 5px;
  }
  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
